<template>
  <rx-layout>
    <div slot="center">
      <a-form :form="form" style="height: 100%;">
        <a-row>
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="$comi18('formDef.valueSource', '值来源')">
              <a-radio-group :options="fromOptions" @change="fromChange" v-decorator="['from',{rules: [{ required: true, message: $comi18('formDef.valueSource', '值来源','input')}] }]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="from=='self'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.option','选项')">
              <div class="table-operator">
                  <a-button @click="addRow">{{$ti18('rxList.add', '新增')}}</a-button>
                  <a-button @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
                  <a-button @click="upRow">{{$comi18('grid.up', '向上')}}</a-button>
                  <a-button @click="downRow">{{$comi18('grid.down', '向下')}}</a-button>
              </div>
              <rx-grid ref="props"
                       :bordered="true"
                       :allowRowSelect="true"
                       :multiSelect="true"
                       style="min-height:200px;"
                       :dataSource="dataSource"
                       :columns="columns"
                       :showPage="false">
              <span slot="name" slot-scope="{text,record,index,blur}">
                <a-input v-model="record.name" @blur="blur(index,'name',text,record)" />
              </span>
                <span slot="key" slot-scope="{text,record,index,blur}">
                <a-input v-model="record.key" @blur="blur(index,'key',text,record)" />
              </span>
              </rx-grid>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="from=='url'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" label="JSON URL">
              <a-input v-decorator="['url',{rules: [{ required: from=='url',message: i18n('form.requiredURL','URL必填')}] }]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="from=='url'">
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.textField','文本字段')">
              <a-input v-decorator="['url_textfield',{rules: [{ required: from=='url',message:i18n('form.textField','文本字段')+$comi18('formbase.mustInput', '必填!')}] }]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.numField','数值字段')">
              <a-input v-decorator="['url_valuefield',{rules: [{ required: from=='url',message:i18n('form.numField','数值字段')+$comi18('formbase.mustInput', '必填!')}] }]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="from=='dic'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.dataDictionary','数据字典项')">
<!--              <a-tree-select v-decorator="['dicKey',{rules: [{ required: from=='dic',message:i18n('form.dataDictionary','数据字典项')+$comi18('formbase.mustInput', '必填!')}] }]" :treeData="dicTree"></a-tree-select>-->
                <rx-input-button v-decorator="['dicKeyTitle',{rules: [{ required: from=='dic',message:i18n('form.dataDictionary','数据字典项')+$comi18('formbase.mustInput', '必填!')}] }]"
                                 @click="selectDic"
                                 style="width: 100%;">
                </rx-input-button>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="from=='sql'">
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.customSQL','自定义SQL')">
              <rx-input-button ref="sql" @click="openCustomQuery" v-decorator="['sql',{rules: [{ required: from=='sql',message: i18n('form.customSQL','自定义SQL')+$comi18('formbase.mustInput', '必填!')}] }]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-show="from=='sql'">
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.textField','文本字段')">
              <a-select :options="sqlFields" v-decorator="['sql_textfield',{rules: [{ required: from=='sql',message:i18n('form.textField','文本字段')+ $comi18('formbase.mustInput', '必填!')}] }]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.numberField','数值字段') ">
              <a-select :options="sqlFields" v-decorator="['sql_valuefield',{rules: [{ required: from=='sql',message:i18n('form.numberField','数值字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.field','显示字段')">
                    <a-select :options="fieldDatas" :getPopupContainer="p=>p.parentNode" v-decorator="['fieldLabel']" allowClear></a-select>
                </a-form-item>
            </a-col>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.required','是否必填')">
              <a-checkbox  :placeholder="i18n('form.required','是否必填')" v-decorator="['required']" :checked="mdl.required" @change="changeData($event,'required')"></a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </rx-layout>
</template>

<script>
  import {RxGrid,Util,Dialog,RxInputButton,App} from "@lowcode/jpaas-common-lib";
  import SysTreeApi from "@/api/system/core/sysTree";


  export default {
    name: "rowControl_select",
    mixins:[App],
    components:{
      RxGrid,
      RxInputButton
    },
    data(){
      return {
        labelCol: { span:6 },
        wrapperCol: { span:18 },
        labelCol1: { span:3 },
        wrapperCol1: { span:19 },
        form: this.$form.createForm(this),
        mdl:{},
        fromOptions:[{'value':'self','label':this.i18n('form.custom','自定义')},
          {'value':'url','label':'URL'},
          {'value':'dic','label':this.i18n('form.dataDictionary','数据字典')},
          {'value':'sql','label':this.i18n('form.customSQL','自定义SQL')}],
        from:"",
        dataSource:[],
        columns:[
          {title: this.$ti18('rxList.index', '序号'), type: 'indexColumn', width: 80, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
          {title: this.$ti18('rxForm.name', '名称'), dataIndex: 'name', width: 120,allowCellEdit:true,scopedSlots: {customRender: 'name'}},
          {title: this.i18n('form.name', '标识名'), dataIndex: 'key', width: 120,allowCellEdit:true,scopedSlots: {customRender: 'key'}}
        ],
        dicTree:[],
        sqlFields:[],
        fieldDatas:[],

      }
    },
    created(){

    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "rowControls", key);
        },
      setData(controlConf,fieldDats){
        this.mdl=controlConf;
        this.fieldDatas=fieldDats;
        this.from=this.mdl.from;
        if(this.mdl.sql) {
          this.mdl.sql = '{value:\'' + this.mdl.sql + '\',text:\'' + this.mdl.sql_name + '\'}';
        }
        this.sqlFields = this.mdl.sqlFields || [];
        var props=this.mdl.props || '[]';
        this.dataSource=JSON.parse(props);
        this.form.setFieldsValue(this.mdl)
      },
      validate(callback){
        var self=this;
        this.form.validateFields((err, values) => {
          if(err){
            return;
          }
          self.mdl=values;
          callback();
        });
      },
      getData(){
        this.mdl.props = JSON.stringify(this.$refs.props.getData());

        var sql = this.$refs.sql.getVal();
        this.mdl.sql=sql.value;
        this.mdl.sql_name=sql.text;
        this.mdl.sqlFields=this.sqlFields;
        if (this.mdl.dicKeyTitle){
            let dicObj=JSON.parse(this.mdl.dicKeyTitle)
            this.mdl.dicKey=dicObj.value
            this.mdl.dicName=dicObj.text
        }
        return this.mdl;
      },
      changeData(e,field){
        this.mdl[field]=e.target.checked;
      },
      fromChange(e){
        this.from=e.target.value;
      },
      addRow(){
        this.$refs.props.addRow();
      },
      removeRow(){
        this.$refs.props.removeRows();
      },
      upRow(){
        this.$refs.props.moveUp();
      },
      downRow(){
        this.$refs.props.moveDown();
      },
      openCustomQuery(vm){
        Dialog.openCustomDataDialog({
          curVm: this, widthHeight: ['1200px', '600px']
        }, function (self, data) {
          self.loadFields(data);
          vm.setVal(data.key,data.name);
        })
      },
      loadFields(row){
        var fieldStr=row.resultField;
        if(!fieldStr) return;
        var fileds=JSON.parse(fieldStr);
        var ary=fileds.map(function(item){
          return {
            value:item.fieldName,
            label:item.comment
          }
        })
        this.sqlFields=ary;
      },
      selectDic(vm){
          var conf = {
              curVm: this, data: {allowTree:true}, widthHeight: ['800px', '600px'],
          }
          let self_ = this;
          Dialog.openSysDicDialog(conf,function (curVue, row) {
              self_.form.dicKey = row.alias;
              self_.form.dicName = self_.$i18(row.name,"名称")
              self_.form.dicKeyTitle = {text:row.pkId, value:self_.form.dicName}
              vm.setVal(self_.form.dicKey,self_.form.dicName);
          })
      },
    }
  }
</script>

<style scoped>

</style>